<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.StoryDetails.TITLE' | translate: {Default: "Story Details"} }}
    </span>
  </div>

  <input #fileUpload type="file" class="file-input h-0 invisible" (change)="onFileSelected($event)" (click)="fileUpload.value=null;" accept="image/*">
    
  <mat-nav-list class="ngm-nav-list">
    <mat-list-item class="mt-2" [class.active]="activeLink === c_details"
      (click)="activeLink = c_details">
      <span > {{ 'Story.StoryDetails.General' | translate: {Default: 'General'} }} </span>
    </mat-list-item>

    <mat-list-item class="mt-2" [class.active]="activeLink === c_thumbnail"
      (click)="activeLink = c_thumbnail">
      <span> {{ 'Story.StoryDetails.Thumbnail' | translate: {Default: 'Thumbnail'} }} </span>
    </mat-list-item>
  </mat-nav-list>

  <div class="flex-1">
    <div *ngIf="activeLink === c_thumbnail" class="flex-1 flex flex-col justify-start items-end gap-2 my-2">
      <button mat-stroked-button ngmAppearance="dashed" displayDensity="cosy" color="accent" (click)="fileUpload.click()">
        <div class="flex justify-start items-center">
          <mat-icon fontSet="material-icons-round">upload</mat-icon>
          {{ 'Story.Common.Upload' | translate: {Default: "Upload"} }}
        </div>
      </button>

      <mat-form-field appearance="fill" color="accent" class="w-full">
        <mat-label>
          {{ 'Story.StoryDetails.ThumbnailUrl' | translate: {Default: "Thumbnail Url"} }}
        </mat-label>
        <input matInput [(ngModel)]="thumbnail" (ngModelChange)="onThumbnailChange($event)">
      </mat-form-field>
    </div>
  </div>
  <div class="flex justify-between">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" cdkFocusInitial (click)="onApply()">
        {{ 'Story.Common.Apply' | translate: {Default: "Apply"} }}
      </button>
      <button mat-button (click)="reset()">
        {{ 'Story.Common.Reset' | translate: {Default: "Reset"} }}
      </button>
    </div>
  </div>
</div>

<div>
  <div *ngIf="activeLink === c_details" class="grid grid-cols-1 gap-x-4 sm:grid-cols-2 p-8">

    <mat-form-field appearance="fill" class="grid-cols-1 sm:col-span-2">
      <mat-label>
        {{ 'Story.StoryDetails.StoryName' | translate: {Default: "Story Name"} }}
      </mat-label>
      <input matInput [(ngModel)]="name">
    </mat-form-field>

    <mat-form-field appearance="fill" floatLabel="always" class="grid-cols-1 sm:col-span-2">
      <mat-label>
          {{ 'Story.StoryDetails.Description' | translate: { Default: 'Description' } }}
      </mat-label>
      <textarea matInput [(ngModel)]="description"
          placeholder="{{ 'Story.StoryDetails.DescriptionPlaceholder' | translate: { Default: 'Optional, desciption of the story' } }}"
      ></textarea>
    </mat-form-field>

    <mat-form-field appearance="fill" floatLabel="always" class="col-span-2">
      <mat-label>
        {{ 'Story.StoryDetails.Models' | translate: { Default: 'Models' } }}
      </mat-label>
      <mat-chip-grid #chipGrid>
        <mat-chip-row *ngFor="let model of models()" color="primary" highlighted (removed)="removeModel(model)">
          {{model.name}}
          <button matChipRemove [attr.aria-label]="'remove ' + model.name">
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip-row>
      </mat-chip-grid>
      <input type="text" #modelInput
             placeholder="{{ 'Story.StoryDetails.AddSemanticModels' | translate: { Default: 'Add semantic models' } }}"
             matInput
             [formControl]="modelCtrl"
             [matChipInputFor]="chipGrid"
             [matAutocomplete]="auto">
      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayWithName"
        (optionSelected)="modelSelected($event)">
        <mat-option *ngFor="let option of models$()" [value]="option">
          <div class="flex items-center">
            <button mat-icon-button displayDensity="cosy" (click)="openSemanticModel(option.id)">
              <mat-icon>open_in_new</mat-icon>
            </button>
            <span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
              [content]="option.name">
            </span>
          </div>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

    <mat-form-field appearance="fill" class="col-span-1">
      <mat-label>
        {{ 'Story.StoryDetails.LOCALE' | translate: {Default: "Locale"} }}
      </mat-label>
      <mat-select [(value)]="details.locale">
        <!-- <mat-option value="en-US">
          {{ 'Story.StoryDetails.LOCALE_enUS' | translate: {Default: "en-US"} }}
        </mat-option> -->
        <mat-option value="en">
          {{ 'Story.StoryDetails.LOCALE_en' | translate: {Default: "en"} }}
        </mat-option>
        <mat-option value="zh-Hans">
          {{ 'Story.StoryDetails.LOCALE_zhHans' | translate: {Default: "zh-Hans"} }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-checkbox [(ngModel)]="details.fullscreen" class="col-span-1 my-2">
      {{ 'Story.StoryDetails.DISPLAY_AS_FULLSCREEN' | translate: {Default: "Display as Fullscreen"} }}
    </mat-checkbox>

    <!-- <mat-checkbox [(ngModel)]="details.showFullscreenButton" class="col-span-1 my-2">
      {{ 'Story.StoryDetails.SHOW_FULLSCREEN_BUTTON' | translate: {Default: "Show Fullscreen Button"} }}
    </mat-checkbox>

    <mat-checkbox [(ngModel)]="details.hideStoryFilterBar" class="col-span-1 my-2">
      {{ 'Story.StoryDetails.HIDE_STORY_FILTER_BAR' | translate: {Default: "Hide Story Filter Bar"} }}
    </mat-checkbox> -->
    
  </div>

  <div *ngIf="activeLink === c_thumbnail" class="min-h-[500px] min-w-[600px] relative">
    <img *ngIf="imagePreview" [src]="imagePreview" alt="Image Preview" class="object-contain mx-auto h-auto">

    <div *ngIf="error" class="absolute w-full h-full left-0 top-0 flex justify-center items-center p-8 backdrop-blur-sm bg-white/10 rounded-md">
      <mat-error>{{error}}</mat-error>
    </div>

    <button mat-icon-button class="pac-story-details__thumbnail-remove absolute right-2 top-2" displayDensity="cosy" ngmAppearance="danger"
      (click)="deleteThumbnail()">
      <mat-icon>close</mat-icon>
    </button>
  </div>
</div>
